

<template>
  <!-- 导航部分 -->
  <el-row class="row">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品规格列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>

  <!-- 搜索栏 -->
  <el-row class="row">
    <el-col :span="24">
      <el-form inline :model="speQuery" label-width="auto" >
        <el-form-item label="规格名称">
          <el-input v-model="speQuery.speName" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
              v-model="speQuery.status"
              placeholder="全部状态"
              size="large"
              style="width: 240px"
          >
            <el-option :key="0" label="全部" :value="0"/>
            <el-option :key="1" label="正常" :value="1"/>
            <el-option :key="2" label="禁用" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadSpes" type="info">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <!-- 工具栏 -->
  <el-row class="row">
    <el-col :span="24">
      <el-button-group class="ml-4">
        <el-button type="primary" @click="toAdd"><el-icon><Plus /></el-icon></el-button>
        <el-button type="primary" ><el-icon><EditPen /></el-icon></el-button>
        <el-button type="primary" ><el-icon><Minus /></el-icon></el-button>
      </el-button-group>
    </el-col>
  </el-row>


  <!-- 列表 -->
  <el-row class="row">
    <el-col :span="24">
      <el-table :data="spes" stripe  border style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="speName" label="规格名称" />
        <el-table-column prop="createTime" label="创建时间"  />
        <el-table-column prop="status" label="状态"  >
          <template #default="scope">
            <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240" >
          <template #default="scope">
            <el-button size="small" type="info">编辑</el-button>
            <el-button size="small" type="error">删除</el-button>
            <el-button size="small" @click="toManagerItems(scope.row.speId)" type="primary">规格项</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <!-- 分页栏 -->
  <el-row class="row">
    <el-col :span="24">
      <el-pagination @change="changePage" background layout="prev, pager, next" :total="total" />
    </el-col>
  </el-row>

  <!-- 新增规格的弹窗 -->
  <el-dialog
      v-model="addSpeDialogVisible"
      title="新增规格"
      width="500"
      :before-close="handleClose"
  >
    <span>
      <el-form-item label="规格名称">
        <el-input v-model="speName"></el-input>
      </el-form-item>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addSpeDialogVisible.value = false">取消</el-button>
        <el-button type="primary" @click="soAddSpeSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>
<script setup>
import {useRouter} from 'vue-router'
import speRequest from '../../api/spe.js';
import {ref, onMounted, reactive} from 'vue';
import {ElMessage} from 'element-plus'
let router = useRouter();
// 属性定义
let speQuery = reactive({});// 封装搜索条件
let spes = ref([]);// 规格数据列表
// 分页相关属性
let total = ref(0);
let currentPage = ref(1);
let limit = ref(10);
// 新增规格的相关属性
let  addSpeDialogVisible = ref(false); // 新增弹窗的标志
let speName = ref('');// 新增规格的名称

// 函数
/**
 * 规格项管理的行按钮事件
 * @param speId
 */
function toManagerItems(speId){
  router.push("/home/goods-spe-item-list/"+speId);
}

/**
 * 工具栏添加按钮的事件
 */
function toAdd(){
  addSpeDialogVisible.value = true;
}

/**
 * 新增规格弹窗的提交事件
 */
function soAddSpeSubmit(){
  speRequest.save({speName:speName.value},res=>{
    if(res.code == 200){
      ElMessage({
        type:"success",
        message:"新增规格成功"
      });
      speName.value = '';
      addSpeDialogVisible.value = false;
      // 刷新列表
      loadSpes();
    }else{
      ElMessage({
        type:"error",
        message:"新增规格失败"
      });
    }
  })
}
/**
 * 加载所有的spe
 */
function loadSpes(){
  speRequest.queryByPage(currentPage.value,limit.value,speQuery,res=>{
    console.log(res)
    spes.value = res.data.records;
    total .value = res.data.total;
  })
}

onMounted(()=>{
  loadSpes();
})
</script>
<style scoped>

</style>